<template>
    <div class="container">
        <van-tabs v-model:active="active">
            <van-tab title="点菜">
                <van-collapse v-model="activeNames">
                    <div v-for="({ id, name, list }, idx) in cooks">
                        <van-swipe-cell>
                            <van-collapse-item :title="name" :name="id">
                                <van-list finished-text="没有更多了">
                                    <van-cell v-for="item in list" :key="item" :title="item" />
                                </van-list>
                            </van-collapse-item>
                            <template #right>
                                <van-button square type="primary" text="详情" @click="goDetail(id)"/>
                                <van-button square type="danger" text="删除" @click="remove(idx)" />
                            </template>
                        </van-swipe-cell>
                    </div>
                </van-collapse>
            </van-tab>
            <van-tab title="食材">
                <van-collapse v-model="activeNames">
                    <div v-for="({ id, name, list }, idx) in materials">
                        <van-collapse-item :title="name" :name="id">
                            <van-list finished-text="没有更多了">
                                <van-cell v-for="item in list" :key="item" :title="item" />
                            </van-list>
                        </van-collapse-item>
                    </div>
                </van-collapse>
            </van-tab>
        </van-tabs>

        <VerticalSpace size="50px"/>
    </div>

    <Tab active="basket" />
</template>

<script setup lang="ts">
import Tab from '@/components/Tab.vue'
import { useBasketStore, type Cook } from '@/stores/basket.ts'
import VerticalSpace from '@/components/VerticalSpace.vue'

const router = useRouter()

const basketStore = useBasketStore()

const active = ref(0)

const activeNames = ref([])

interface CookModel {
    id: string;
    name: string;
    list: Array<string>;
}

const goDetail = (id: string) => {
    router.push(`/detail/${id}`)
}

// 菜谱
const cooks = computed(() => {
    const cooks: Array<Cook> = basketStore.list()
    const cookModels: Array<CookModel> = []
    for (let c of cooks) {
        const content = c.content
        // 拆分content
        let arr = content.split('\n')
        arr = arr.map(item => item.replace('-', ''))
        cookModels.push({
            id: c.id + "",
            name: c.name,
            list: arr
        })
    }
    return cookModels
})

// 食材
const materials = computed(() => {
    const cooks: Array<Cook> = basketStore.list()
    const map = new Map<string, Array<Cook>>()
    const cookModels: Array<CookModel> = []
    for (let c of cooks) {
        const content = c.content
        // 拆分content
        let arr = content.split('\n')
        arr = arr.map(item => item.replace('-', ''))
        for (let c1 of arr) {
            c1 = c1.trim()
            let list: Array<Cook> = map.get(c1)!
            if (list == undefined) {
                list = []
                map.set(c1, list)
            }
            list.push(c)
        }
    }
    let i = 0
    // 构建对象
    for (let entry of map) {
        const tmps = entry[1].map(item => item.name)
        cookModels.push({
            id: i + '',
            name: entry[0],
            list: tmps
        })
        i++
    }
    return cookModels
})

const remove = (idx: number) => {
    console.log(`删除元素: ${idx}`)
    basketStore.remove(idx)
}

</script>

<style scoped>
.container {
    background-color: var(--color-background-soft);
}

</style>